<template>
	<view class="user-info">
		<!-- 	<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl" mode=""></image>
		</button> -->
		<view class="user-center">
			<view class="user-center_l">
				头像
			</view>
			<view class="user-center_right">
				<image @click="avatarimage" v-if="url_phone != ''"
					src="https://thywtjp.lysport.net/assets/wechat_img/d486f37c1f8b7458c01bc2243e0333f252f2b33a.png"
					mode="" style="width: 30rpx; height: 30rpx;position: absolute;right: 5vw;z-index: 999;">
				</image>
				<u-avatar class="avatar" v-if="url_phone != ''" :src="url_phone" size="80rpx" />
				<u-upload v-else :fileList="fileList1" name="1" width="80rpx" height="80rpx" @afterRead="afterRead"
					@delete="deletePic" multiple :maxCount="1" />
			</view>
		</view>
		<view class="user-center">
			<view class="user-center_l">
				昵称
			</view>
			<view class="user-center_right">
				<input v-model="base_name" type="text" class="weui-input" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="user-center">
			<view class="user-center_l">
				性别
			</view>
			<view class="user-center_right">
				<u-radio-group v-model="base_gender" @change="groupChange">
					<u-radio label="男" :name="1" activeColor="#4BA677" />
					<u-radio label="女" :name="2" customStyle="margin-left: 30rpx;" activeColor="#0E9698" />
				</u-radio-group>

			</view>
		</view>
		<view class="user-center">
			<view class="user-center_l">
				手机号
			</view>
			<view class="user-center_right">
				<input v-model="base_phone" type="number" maxlength="11" class="weui-input" placeholder="请输入手机号"
					disabled />
			</view>
		</view>
		<view class="user-center">
			<view class="user-center_l">
				出生年月
			</view>
			<view class="user-center_right">
				<view @click="showBirthdayPicker = true" style="margin-left: 2vh;">
					<u-text :text="base_birthday" v-if="base_birthday" color="#303133"></u-text>
					<u-text text="点击选择年月" v-else color="#303133"></u-text>
				</view>
				<u-datetime-picker v-model="defaultBirthday" :show="showBirthdayPicker" mode="date" :minDate="minDate"
					:maxDate="maxDate" @confirm="confirmBirthday" @cancel="showBirthdayPicker = false"
					confirmColor="#0E9698" />
			</view>
		</view>
		<view class="user-center">
			<view class="user-center_l">
				身高
			</view>
			<view class="user-center_right">
				<input v-model="base_height" type="number" maxlength="3" class="weui-input" placeholder="请输入身高" />
			</view>
		</view>
		<view class="user-center">
			<view class="user-center_l">
				身份证
			</view>
			<view class="user-center_right">
				<input v-model="base_num" type="text" class="weui-input" placeholder="请输入身份证" />
			</view>
		</view>
		<button class="saveBtn" @click="saveInfo">保存</button>
	</view>
</template>

<script>
	import {
		formatDate
	} from "@/utils/util.js";
	const index = require("@/api/index/index.js");
	import cryptoUtils from '@/common/encryption.js';
	export default {
		data() {
			return {
				avatarUrl: 'https://niule.qfycloud.com/images/avatar.png',
				fileId: undefined,
				rules: {},
				base_num: "", // 身份证号码
				base_height: '', //身高
				base_phone: '', //手机号
				base_name: '', // 姓名,
				base_gender: 1, //性别
				base_birthday: '', //年龄
				userInfo: uni.getStorageSync('userInfo'), //用户信息
				minDate: new Date(new Date().getFullYear() - 100, 0, 1).getTime(),
				maxDate: Date.now(),
				Default: new Date(new Date().getFullYear() - 20, 0, 1).getTime(),
				defaultBirthday: new Date(new Date().getFullYear() - 20, 0, 1).getTime(),
				showBirthdayPicker: false,
				fileList1: [],
				url_phone: ''
			}
		},
		onLoad() {
			this.userdetails()
		},
		methods: {
			// 获取用户个人详情
			userdetails() {
				let that = this
				index.userdetails({
					token: uni.getStorageSync('token'),
				}).then(res => {
					console.log(res, '1111')
					if (res.code == 1) {
						that.url_phone = res.data.avatar //头像
						that.base_num = res.data.id_card // 身份证号码
						that.base_height = res.data.height //身高
						that.base_birthday = res.data.birthday //生日
						that.base_phone = res.data.mobile //手机号
						that.base_name = res.data.nickname // 昵称,
						that.base_gender = res.data.gender //性别

					}
				})
			},
			avatarimage() {
				this.url_phone = ''
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://thywtjp.lysport.net/QIKeLzWdFk.php/ajax/up_file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							token: uni.getStorageSync('token'),
						},
						success: (res) => {
							let result = JSON.parse(res.data);
							that.url_phone = result.code.fullurl
						}
					});
				})
			},
			confirmBirthday({
				value
			}) {
				this.base_birthday = formatDate(value, 'YYYY-MM-DD');
				this.showBirthdayPicker = false;
				console.log(this.base_birthday)
			},
			groupChange(n) {
				this.base_gender = n
				console.log(n, '78')
			},
			onNickName(e) {
				this.name = e.detail.value
			},
			// 头像
			onChooseAvatar(e) {
				console.log(e, '12132132')
				this.avatarUrl = e.detail.avatarUrl
				uni.showLoading({
					title: '加载中'
				})
				uni.uploadFile({
					url: 'https://shop-wx.nulemedical.com/file/mp/uploadLocalReturnId',
					filePath: this.avatarUrl,
					name: 'file',
					header: {
						token: uni.getStorageSync("token")
					},
					formData: {
						source: '头像',
						type: 'master'
					},
					success: (res) => {
						uni.hideLoading()
						if ((JSON.parse(res.data)).code == 200) {
							console.log(res.data, '999')
							this.fileId = (JSON.parse(res.data)).data
						}
					}
				})
			},
			async saveInfo() {
				let that = this
				if (!that.url_phone) { //判断如果身份证为空，提示用户输入身份证
					uni.showToast({
						title: '请输入头像',
						icon: 'none'
					})
					return
				} 
				if (!that.base_name) { //判断如果身份证为空，提示用户输入身份证
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				} 
				if (!that.base_gender) { //判断如果身份证为空，提示用户输入身份证
					uni.showToast({
						title: '请输入性别',
						icon: 'none'
					})
					return
				} 
				let datas = {
					avatar:that.url_phone,//头像
					nickname:that.base_name,// 昵称,
					mobile:that.base_phone,//手机号
					birthday:that.base_birthday,//生日
					gender:that.base_gender,//性别
					height:that.base_height,//身高
					id_card:that.base_num,// 身份证号码
				};
				console.log(datas)
				let res = await index.details_edit(datas);
				console.log(res,'[[[]]]')
				if (res.code == 1) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000) 
				} else {
					uni.showToast({
						title: '修改失败',
						icon: 'none'
					})
				}
			}
		}

	}
</script>

<style lang="scss">
	.user-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.user-center {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10rpx 4vh;
			line-height: 80rpx;

			.user-center_l {
				text-align: left;
			}

			.user-center_right {
				text-align: right;
			}

		}

		/deep/.u-form {
			.u-form-item {
				background-color: #fff;
			}

			.u-form-item__body {
				padding: 30rpx;
			}

			.group {
				margin-top: 20rpx;
			}

			.u-form-item__body__right__message {
				margin-left: 270rpx !important;
			}
		}

		.avatar-wrapper {
			display: flex;
			align-items: center;
			border: none !important;
			background-color: #fff !important;
			padding-top: 40upx;

			&::after {
				display: none;
			}

			.avatar {
				width: 100upx;
				height: 100upx;
				border-radius: 8upx;
			}
		}

		.userName {
			display: flex;
			align-items: center;
			padding: 20upx 40upx;
			border-bottom: 2upx solid rgba(0, 0, 0, 0.1);
			// margin-top: 30upx;

			.label {
				width: 60%;
				margin-right: 40upx;
				height: 50rpx;
			}

			.weui-input {
				font-size: 26rpx;
			}
		}

		.saveBtn {
			background: #0E9698;
			color: white;
			display: block;
			width: calc(100% - 80upx);
			border-radius: 44upx;
			position: absolute;
			bottom: 40rpx;
			margin: 60upx auto 0;
			left: 5%;
		}
	}
</style>